<template>
  <div>

    <div class="fly-header layui-bg-black">
      <div class="layui-container">
        <a class="fly-logo" href="/">
          <img src="@/assets/logo.png" alt="layui">
        </a>
<!--        <ul class="layui-nav fly-nav layui-hide-xs">
          <li class="layui-nav-item layui-this">
            <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
          </li>
          <li class="layui-nav-item">
            <a href="case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
          </li>
          <li class="layui-nav-item">
            <a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
          </li>
        </ul>-->

        <ul class="layui-nav fly-nav-user">

          <!-- 未登入的状态 -->
          <template v-if="Object.keys(user).length == 0">
            <li class="layui-nav-item">
              <router-link class="iconfont icon-touxiang layui-hide-xs" to="/login"></router-link>
            </li>
            <li class="layui-nav-item">
              <router-link to="/login">登入</router-link>
            </li>
            <li class="layui-nav-item">
              <router-link to="/register">注册</router-link>
            </li>
          </template>
          <!-- 登入后的状态 -->
          <template v-else>
            <li class="layui-nav-item"
                @mouseover="mouseOver"
                @mouseleave="mouseLeave"
            >
              <router-link class="fly-nav-avatar" to="/user">
                <cite class="layui-hide-xs">{{user.name}}</cite>
                <i class="iconfont icon-renzheng layui-hide-xs"></i>
                <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
                <img :src="user.http_head_img">
              </router-link>
              <dl class="layui-nav-child"
                  :style="isShow"
              >
<!--                <dd><router-link to="/user"><i class="layui-icon">&#xe620;</i>修改密码</router-link></dd>
                <dd><router-link to="/message"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</router-link></dd>-->
                <dd><router-link to="/user"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>用户中心</router-link></dd>
                <hr style="margin: 5px 0;">
                <dd><a @click="logOut" style="text-align: center;">退出</a></dd>
              </dl>
            </li>
          </template>
        </ul>
      </div>
    </div>

  </div>

</template>

<script>
import {message} from "@/element/message";

export default {
  name: 'Header',
  data () {
    return {
      user: {},
      isShow: 'display:none'
    }
  },
  methods: {
    // 鼠标移入
    mouseOver: function () {
      this.isShow = ''
    },
    // 鼠标移出
    mouseLeave: function () {
      this.isShow = 'display:none'
    },
    logOut: function () {
      message('退出成功')
      localStorage.removeItem('user')
      this.$router.push({
        path:'/login'
      })
    }
  },
  mounted () {
    // localStorage.removeItem('user')
    if (localStorage.getItem('user')) {
      this.user = JSON.parse(localStorage.getItem('user'))
    }
  }
}
</script>

<style scoped>

</style>